<template>
    <div class="creation">
        <div class="top">
            <input type="button" value="开始创作" @mousedown="btnDown" @mouseup="btnUp" ref="creationBtn"
                @click="btnPostCreate" />
        </div>
        <div class="content">
            <template v-if="dataArr.length > 0">
                <div class="yes">
                    <ul>
                        <li v-for="item in dataArr" :key="item.id">
                            <h4>{{ item.title }}</h4>
                            <p>
                                <span class="iconfont icon-zuozhe icon"></span>
                                <span>&ensp;{{ item.userName }}&ensp;|&ensp;</span>
                                <span class="iconfont icon-createTime icon"></span>
                                <span>&ensp;{{ item.createdAt }}&ensp;|&ensp;</span>
                                <span class="iconfont icon-xiugaishijian icon"></span>
                                <span>&ensp;{{ item.updatedAt }}&ensp;|&ensp;</span>
                                <span class="iconfont icon-yanjing icon"></span>
                                <span>&ensp;{{ item.views }}</span>
                            </p>
                            <div class="operate">
                                <span class="iconfont icon-xiugai icon" @click="btnPostUpdate(item.id)"></span>
                                <span class="iconfont icon-shanchu icon" @click="showDeleteModal(item.id)"></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </template>
            <template v-else>
                <div class="no">
                    <span class="iconfont icon-kongxiangzi icon"></span>
                    <p>还没有作品开始创作吧</p>
                </div>
            </template>
        </div>
    </div>
    <Modal :isModal="isDeleteModal" :modal="deleteModal" @close="isDeleteModal = false" @affirm="confirmDelete" />
    <Modal :isModal="isResultModal" :modal="resultModal" @close="isResultModal = false" />
</template>

<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useUserStore } from '@/store/User.js';
import { useRouter } from 'vue-router';
import Modal from '@/components/modal/Modal.vue';

const UserStore = useUserStore();
const router = useRouter();
const creationBtn = ref(null);
let dataArr = ref([]);
let isDeleteModal = ref(false);
let deleteId = ref('')
let deleteModal = ref({
    title: '确认删除',
    content: '确定要删除该作品吗？',
    type: 'confirm',
});
let isResultModal = ref(false);
let resultModal = ref({
    title: '',
    content: '',
    type: 'info',
});

function btnDown() {
    creationBtn.value.style.boxShadow = `1px 1px 1px 1px black`;
}

function btnUp() {
    creationBtn.value.style.boxShadow = `2px 2px 2px 2px black`;
}

function btnPostCreate() {
    setTimeout(() => {
        router.push({
            path: '/editor',
        });
    }, 100);
}

function btnPostUpdate(id) {
    router.push({
        path: `/editor/${id}`,
    });
}

function showDeleteModal(id) {
    deleteId.value = id
    isDeleteModal.value = true;
}

function confirmDelete() {
    axios({
        method: 'delete',
        url: `http://127.0.0.1:8000/api/post/${deleteId.value}`,
        params: {
            userID: UserStore.UserID,
        }
    })
        .then(res => {
            resultModal.value.title = '成功提示';
            resultModal.value.content = res.data.message;
            dataArr.value = dataArr.value.filter((item) => item.id !== deleteId.value);
            isDeleteModal.value = false;
            isResultModal.value = true;
        })
        .catch(err => {
            resultModal.value.title = '错误提示';
            resultModal.value.content = err.response.data.message;
            isDeleteModal.value = false;
            isResultModal.value = true;
        });
}

onMounted(() => {
    creationBtn.value.style.boxShadow = `2px 2px 2px 2px black`;
    axios({
        method: 'get',
        url: 'http://127.0.0.1:8000/api/post',
        params: {
            userID: UserStore.UserID,
        }
    })
        .then((res) => {
            dataArr.value = res.data.data;
        })
        .catch((err) => {
            console.error(err);
        });
});
</script>

<style scoped>
.creation {
    width: 80%;
    height: 93vh;
    background-color: white;
    margin: 1vh;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.creation div {
    margin-top: 2%;
}

.creation .top {
    width: 95%;
    height: 5%;
    display: flex;
    justify-content: flex-end;
    margin-right: 5%;
}

.creation [type="button"] {
    width: 10%;
    height: 100%;
    background-image: linear-gradient(45deg, rgb(112, 222, 255), rgb(198, 118, 255));
    border-radius: 5px;
    border: 1px solid;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
}

.creation .content {
    width: 95%;
    height: 91%;
    border-top: 1px solid black;
}

.icon {
    font-size: 100px;
    background-image: linear-gradient(45deg, rgb(112, 222, 255), rgb(198, 118, 255));
    color: transparent;
    background-clip: text;
    margin-bottom: 20px;
}

.yes .icon {
    margin: 0;
}

.creation .yes {
    width: 100%;
    height: 98%;
    margin-top: 1%;
}

.creation .yes ul {
    width: 100%;
    height: 97.5%;
    overflow-y: auto;
}

.creation .yes li {
    width: 100%;
    height: 15%;
    border-bottom: 1px solid rgb(223, 223, 223);
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.creation .yes li:hover {
    background-color: rgb(243, 243, 243);
}

.yes p {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.yes p .icon:nth-child(1) {
    font-size: 15px;
}

.yes p .icon:nth-child(3) {
    font-size: 26px;
}

.yes p .icon:nth-child(5) {
    font-size: 19px;
}

.yes p .icon:nth-child(7) {
    font-size: 19px;
}

.yes .operate {
    position: absolute;
    right: 10px;
    width: 5%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.yes .operate span:nth-child(1) {
    font-size: 16px;
}

.yes .operate span:nth-child(2) {
    font-size: 16px;
}

.creation .no {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
}

.creation .no p {
    background-image: linear-gradient(45deg, rgb(112, 222, 255), rgb(198, 118, 255));
    color: transparent;
    background-clip: text;
}
</style>